<template>
    <div class="container">
      <template v-for="(item, index) in form[0].urlList">
      <el-form ref="form" :model="item" label-width="110px">
          <div class="model-item">
            <div class="head">
              <span>模块{{modelIndex[index]}}</span>
            </div>
            <div style="padding-right:16px">
              <el-form-item label="软件名称">
                <el-input v-model="item.title"></el-input>
              </el-form-item>
              <el-form-item label="下载链接">
                <el-input v-model="item.subtitle"></el-input>
              </el-form-item>
              <el-form-item label="提取码">
                <el-input v-model="item.name"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="banner">
            <div class="pt16 pb16">
              <el-button type="primary" plain @click="handleAddLogs(item,index)" icon="el-icon-edit">添加日志</el-button>
            </div>
            <el-table
              :data="item.appList"
              border
              style="width: 100%">
              <el-table-column
                  type="index"
                  label="序号"
                  width="50">
                  </el-table-column>
              <el-table-column
                prop="versions"
                label="版本号"
                show-overflow-tooltip
                width="250">
              </el-table-column>
              <el-table-column
                prop="logtext"
                label="更新内容"
                show-overflow-tooltip
                >
              </el-table-column>
              <el-table-column
                prop="uploadTime"
                label="修改日期"
                show-overflow-tooltip
                >
              </el-table-column>
              <el-table-column
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-link :underline="false" @click="handleEditRow(scope.row,scope.$index,index)">修改</el-link>
                  <el-link :underline="false" @click="handleDeleteRow(scope.row,scope.$index,index)">删除</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
      </template>
      <el-dialog :title="itemForm.id?'修改日志':'添加日志'" :close-on-click-modal="false" :visible.sync="isShow"
      custom-class="comDialog" width="30%">
      <div class="dialogDody">
        <el-form ref="passForm"  label-width="100px" :model="itemForm" class="">
          <el-form-item label="版本号">
            <el-input v-model="itemForm.versions" placeholder="请输入版本号"></el-input>
          </el-form-item>
          <el-form-item label="修改日期">
            <el-date-picker
              v-model="itemForm.uploadTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 100%;"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="更新内容">
            <el-input v-model="itemForm.logtext" placeholder="请输入更新内容" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isShow=false">取 消</el-button>
        <el-button element-loading-spinner="el-icon-loading" type="primary"
          size="mini" @click="handleLogsSave">保存</el-button>
      </span>
    </el-dialog>
      <div class="save">
        <el-button type="primary" @click="handleSave" style="margin-top:16px;">保存</el-button>
      </div>
    </div>
  </template>
    <script>
  import { mapGetters } from "vuex";
  export default {
    name: "cartonConfig",
    components: {
    },
    data() {
      return {
        form:[{
            urlList:[]
        }],
        isShowImgView:false,
        itemForm:{},
        isShow:false,
        rowIndex:0,
        tableIndex:0,
        copyItemForm:{},
        state:'',
        modelIndex:['一','二','三']
      };
    },
    computed: {
      ...mapGetters(["name"]),
    },
    created() {
    },
    mounted() {
      this.copyItemForm = JSON.parse(JSON.stringify(this.itemForm))
      this.getData()
    },
    methods: {
      getData(){
          this.$api.system.GetList(8).then((res)=>{
          this.form = res
          })
        },

      handleAddLogs(item,index){
        this.state = 'add'
        this.itemForm = JSON.parse(JSON.stringify(this.copyItemForm))
        this.isShow = true
        this.rowIndex = index
      },

      handleLogsSave(){
        if(this.state == 'edit'){
          this.form[0].urlList[this.rowIndex].appList.splice(this.tableIndex,1,this.itemForm)
          this.isShow = false
          this.$message.success('修改成功！')
        }else{
          this.form[0].urlList[this.rowIndex].appList.push(this.itemForm)
          this.isShow = false
          this.$message.success('添加成功！')
        }
      },

      //删除
      handleDeleteRow(row,index,rowIndex){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.form[0].urlList[rowIndex].appList.splice(index,1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
        });
      },

      handleEditRow(item,index,rowIndex){
        this.state = 'edit'
        this.itemForm = JSON.parse(JSON.stringify(item))
        this.rowIndex = rowIndex
        this.tableIndex = index
        this.isShow = true
      },
  
      handleSave(){
        this.$api.system.UpdateMore(this.form).then(res=>{
            this.$message.success('保存成功！')
            this.getData()
          })
      },
  
    },
  };
  </script>
    <style lang="scss" scoped>
  .container{
    padding:16px;
    overflow-y:auto;
    height:100%;
    $size:148px;
    .tips{
      font-size:13px;
      color:rgba(153, 153, 153, 1);
    }
  
    .save{
      display:flex;
      justify-content:center;
    }
    .modelBox{
      .model{
        display: none;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width:$size;
        height:$size;
        border-radius:6px;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 2;
        >*{
          font-size: 20px;
          color: #fff;
          &:hover{
            color: #3f61f1;
          }
          &:not(:last-child){
            margin-right: 20px;
          }
        }
      }
      &:hover{
        .model{
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .el-upload{
      width: #{$size};
      height: #{$size};
      position: relative;
      .tag{
        position: absolute;
        left: 0;
        top: 0;
        padding: 4px 6px;
        line-height: 1.2em;
        background: rgba(0, 0, 0, 0.75);
        color: #fff;
        font-size: 12px;
        border-radius: 6px 0 4px 0;
        z-index: 2;
      }
    }
    .img_box{
      width: #{$size};
      height: #{$size};
      position: relative;
    }
    .img_boxMore{
      display: flex;
      flex-wrap: wrap;
      margin-right: -8px;
      margin-bottom: -8px;
      .img_box{
        border-radius:8px;
        border: 1px #dcdfe6 solid;
        overflow: hidden;
        margin-right: 8px;
      }
      >*{
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }
  }
    .model-item{
      margin-top:10px;
      border:1px solid #e8e8e8;
      .head{
        margin-bottom:16px;
        padding-left:30px;
        display:flex;
        align-items:center;
        height:40px;
        background: rgba(253, 240, 255, 1);
      }
    }
  </style>
    